<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/main.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script src="js/scroll.js"></script>
	<title>聊天机器人</title>
</head>

<body>
	<div class="wrap">
		<!-- 头部 Header 区域 -->
		<div class="header">
			<h3>小思同学</h3>
			<img src="img/person01.png" alt="icon" />
		</div>
		<!-- 中间 聊天内容区域 -->
		<div class="main">
			<ul class="talk_list" style="top: 0px;" id="talk_list">
				<li class="left_word">
					<img src="img/person01.png" /> <span>嗨，最近想我没有？</span>
				</li>
				<!-- <li class="right_word">
          <img src="img/person02.png" /> <span>你好哦</span>
        </li> -->
			</ul>
			<div class="drag_bar" style="display: none;">
				<div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
			</div>
		</div>
		<!-- 底部 消息编辑区域 -->
		<div class="footer">
			<img src="img/person02.png" alt="icon" />
			<input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" />
			<input type="button" value="发 送" class="input_sub" id="btnSend" />
		</div>
	</div>
	<!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 -->
	<audio src="" id="voice" autoplay style="display: none;"></audio>

	<script>
		// 1 给我们btnSend 绑定点击事件  把输入框里面的内容展示带页面上

		$('#btnSend').on('click', function () {
			// alert(1)
			// 获取到输入框里面的值
			var getVal = $('#ipt').val().trim()
			//判断一下 如果输入框里面没有值  给出提示  阻止后续代码执行
			if (!getVal) {
				alert('输入内容不能为空')
				return false
			}

			//2 动态生成一个li标签   把li追加到ul   内容在右边
			var newLi = $(`<li class="right_word">
          <img src="img/person02.png" /> <span>${getVal}</span>
		</li>`)
			$('ul').append(newLi)
			resetui()

			//3 根据用户输入的内容  请求后台数据 返回 聊天机器人给你返回数据
			$.ajax({
				url: 'http://www.liulongbin.top:3006/api/robot',
				type: 'get',
				data: {
					spoken: getVal
				},
				// 成功
				success: function (res) {
					console.log(res.data.info.text)
					var backVal = res.data.info.text

					var newLi = $(`<li class="left_word">
          <img src="img/person01.png" /> <span>${backVal}</span>
        </li>`)
					$('ul').append(newLi)
					resetui()

					$.ajax({
						url: 'http://www.liulongbin.top:3006/api/synthesize',
						type: 'get',
						data: {
							text: backVal
						},
						success: function (res) {
							console.log(res)
							var  vUrl=res.voiceUrl;
							$('#voice').attr('src',vUrl)

						}
					})





				},
				// 失败
				error: function (err) {
					console.log(err)
				}
			})


			//5  输入框里面的内容清空 
			$('#ipt').val('')
		})




		$('#ipt').on('keyup',function(e){
			console.log(e.keyCode)
			if(e.keyCode===13) {
				$('#btnSend').trigger('click')
			}
		})
	</script>
</body>

</html>